<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素特征</title>
</head>
<body>
    <div id="app" content="后盾人" color="red">hdcms</div>
    <input type="number" name="age" value="88">
    <div class="hdcms">hdcms.com</div>
    
    <div class="hcc" data-content="后盾人"></div>
    <script>
        //特征是可迭代对象，下面使用for...of 来进行遍历
        const app = document.querySelector("#app");
        for(const {name,value} of app.attributes){
            // console.log(name,value);
        }

        //属性值都为字符串，所以数值类型需要进行转化
        //使用getAttribute获取属性
        //使用setAttribute设置属性
        let input = document.getElementsByName('age').item(0);
        let value = input.getAttribute('value') * 1 + 100;
        input.setAttribute('value',value);
        // console.log(value);

        //使用removeAttribute来移除属性
        //使用hasAttribute来检测属性是不是存在
        let hdcms = document.querySelector('.hdcms');
        hdcms.removeAttribute('class');
        // console.log(hdcms.hasAttribute('class'));
        // console.log(hdcms);

        //attributes
        //元素提供了attributes属性可以只读的获取元素的属性
        let hcc = document.querySelector('.hcc');
        // console.dir(hcc.attributes['class'].nodeValue);
        // console.dir(hcc.attributes['data-content'].nodeValue);

        //自定义特征
        

        



    </script>
</body>
</html>